<!-- 择日 -->
<template>
  <div id="lunarGoodDay" class="bg-F9F1E5">
    <c-title :hide="false" text="择日"></c-title>

    <van-cell value="日期选择（点击选择两个时间）" />
    <van-field readonly clickable v-model="checkDay" placeholder="点击选择查询的时间段" @click.stop="showCalendar = true" required />
    <van-cell value="出生日期" />
    <van-field readonly clickable v-model="birthDay" placeholder="点击选择出生日期" @click.stop="showBirth = true" required/>
    <van-cell value="关键词" />
    <van-field readonly clickable v-model="keyword" placeholder="点击选择关键词" @click.stop="wordPop = true" required/>
    <div style="margin: 16px;">
      <van-button round block type="info" color="#BD7E54" @click.stop="onSubmit">{{daylist.length>0?'重新查询':'开始查询'}}</van-button>
    </div>

    <div style="color: #999;" v-if="daylist.length == 0">暂无查询结果~</div>
    <div style="color: #999;" v-else>以下为查询结果</div>

    <div class="goodday-list">
      <div class="list" v-for="(item,index) in daylist" :key="index">
        <div class="flex-a-c" style="padding-bottom: 0.75rem;border-bottom: 1px solid #D9D9D9;flex-wrap: wrap;">
          <div class="">
            <div style="font-size: 3rem;font-weight: bold;color: #1C1C1C;line-height: 2.75rem;">{{item.day}}</div>
            <div>{{item.yearAndMonth}}</div>
            <div>{{item.diffTime != 0 ? item.diffTime + '天后' : '今天'}}</div>
          </div>

          <div style="flex:1;margin-left:0.75rem;line-height: 1.375rem;" class="t-l">
            <div>
              <div>{{item.Lunar[0]}}</div>
            </div>
            <div>
              <div>{{item.Lunar[9]}}</div>
            </div>
            <div class="flex">
              <div style="margin-right: 0.5rem;">{{item.Lunar[1]}}</div><div style="margin-right: 0.5rem;">{{item.Lunar[2]}}</div><div>{{item.Lunar[3]}}</div>
            </div>
            <div class="flex">
              <div style="margin-right: 0.5rem;">{{item.Lunar[11]}}</div><div style="margin-right: 0.5rem;">{{item.Lunar[20]}}</div>
            </div>
            <div class="flex">
              {{item.Lunar[12]}} {{item.Lunar[13]}}
            </div>
          </div>
        </div>

        <div class="flex" style="padding-top: 0.75rem;">
          <div class="btn-small f-bold bg-2C9C56" style="margin-right: 0.5rem;">{{item.Lunar[item.Lunar.length - 2]}}</div>
          <div class="btn-small f-bold bg-D32D30" :class="{'opacity-5': item.isXianChong}">{{item.isXianChong?'中吉':'大吉'}}</div>
          <div class="btn-small f-bold t-r" style="color: #BD7E54;flex: 1;" @click.stop="toAlmanac(item.datetime)">查看详情> </div>
        </div>
      </div>
    </div>

    <van-popup v-model="wordPop" position="bottom" :style="{ height: '70%'}" round>
      <div class="flex" style="height: 100%;flex-direction: column">
        <van-nav-bar title="选择关键词" right-text="取消" @click-right="wordPop = false" />
        <div style="flex: 1; overflow: scroll;">
          <div class="flex yj-box" v-for="(item,index) in YI_JI" :key="index" style="flex-direction: column;">
            <div class="category">{{item.category}}</div>
            <div class="flex" style="flex-wrap: wrap;">
              <div class="yj-item" v-for="(itemChild,indexChild) in item.items" :key="indexChild" @click.stop="selectWord(itemChild)">{{itemChild}}</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <van-calendar v-model="showCalendar" type="range" @confirm="onDayConfirm" :style="{ height: '75%' }" />
    <!-- <van-calendar v-model="showBirth" :minDate="minDate" @confirm="onBirthConfirm" :style="{ height: '75%' }" /> -->
    <van-popup v-model="showBirth" position="bottom" round>
      <van-datetime-picker type="date" v-model="currentDate" title="选择年月日" :min-date="minDate" @confirm="onBirthConfirm" />
    </van-popup>
  </div>
</template>

<script>
const { Solar, Lunar } = require("./lunar.js");
export default {
  data () {
    return {
      showCalendar: false,
      showBirth: false,
      birthDay: "",
      checkDay: null,
      switchChecked: false,
      keyword: "",
      wordPop: false,
      daylist: [],
      minDate: new Date(1924, 0, 1),
      currentDate: new Date(),

      YI_JI: [
        {
          category: "热门",
          items: ["嫁娶", "订婚", "安床", "动土", "祈福", "求医", "入宅", "开市"]
        },
        {
          category: "婚嫁",
          items: ["嫁娶", "订婚", "纳采", "问名", "纳婿", "归宁", "安床", "合帐", "冠笄", "订盟", "进人口", "裁衣", "挽面", "开容"]
        },
        {
          category: "祭祀",
          items: ["祭祀", "祈福", "求嗣", "开光", "酬神", "造庙", "祀灶", "焚香", "谢土", "出火"]
        },
        {
          category: "丧葬",
          items: ["修坟", "启钻", "破土", "安葬", "立碑", "成服", "除服", "开生坟", "合寿木", "入殓", "移柩", "普渡", "入宅", "安香", "安门"]
        },
        {
          category: "修造",
          items: [
            "修造",
            "起基",
            "动土",
            "上梁",
            "竖柱",
            "开井开池",
            "作陂放水",
            "拆卸",
            "破屋",
            "坏垣",
            "补垣",
            "伐木做梁",
            "作灶",
            "解除",
            "开柱眼",
            "穿屏扇架",
            "盖屋合脊",
            "开厕",
            "造仓",
            "塞穴",
            "平治道涂",
            "作厕",
            "开池",
            "伐木",
            "掘井",
            "扫舍",
            "放水",
            "造屋",
            "合脊",
            "造畜稠",
            "修门",
            "定磉",
            "作梁",
            "修饰垣墙",
            "架马"
          ]
        },
        {
          category: "经商",
          items: ["开市", "挂匾", "纳财", "求财", "开仓", "经络", "酝酿", "作染", "鼓铸", "割蜜"]
        },
        {
          category: "农耕",
          items: ["栽种", "取渔", "结网", "牧养", "安碓磑"]
        },
        {
          category: "学习",
          items: ["习艺", "入学"]
        },
        {
          category: "生活",
          items: ["探病", "见贵", "乘船", "渡水", "出行", "移徙", "分居", "纳畜", "捕捉", "畋猎", "教牛马", "会亲友", "赴任", "求医"]
        },
        {
          category: "忌讳",
          items: ["起基动土", "破屋坏垣", "盖屋", "造仓库", "立券交易", "交易", "立券", "安机", "会友", "求医疗病", "诸事不宜", "馀事勿取", "行丧", "断蚁", "归岫"]
        }
      ]
    };
  },

  activated() {},

  components: {},

  computed: {},

  mounted() {},

  methods: {
    formatDate(date) {
      return `${date.getYear()+1900}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onDayConfirm(date) {
      const [start, end] = date;
      this.diffTimeNum = this.diffTime(start, end);
      this.showCalendar = false;
      this.startTime = this.formatDate(start);
      this.endTime = this.formatDate(end);
      this.checkDay = `${this.startTime} - ${this.endTime}`;
    },
    onBirthConfirm(e) {
      if (!e) {
        return;
      }
      this.birthDay = new Date(e).toISOString().slice(0,-14);
      this.birthDayValue = e;
      this.currentDate = new Date(e);
      this.showBirth = false;
    },
    selectWord(word){
      this.keyword = word;
      this.wordPop = false;
    },
    diffTime(start, end) {
      // 计算两个日期的相差天数
      const date1 = new Date(start);
      const date2 = new Date(end);
      const diffTime = Math.abs(date2 - date1);
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      // console.log("两个日期的相差天数:::",date1,date2,diffDays);
      return diffDays;
    },
    onSubmit(){
      if(!this.startTime) {
        return this.$toast.fail({
          message: '请选择查询日期',
          duration: 3000,
        });
      }
      if(!this.endTime) {
        return this.$toast.fail({
          message: '请选择查询日期',
          duration: 3000,
        });
      }
      if(!this.birthDayValue) {
        return this.$toast.fail({
          message: '请选择出生日期',
          duration: 3000,
        });
      }
      if(!this.keyword) {
        return this.$toast.fail({
          message: '请选择关键词',
          duration: 3000,
        });
      }
      this.daylist = [];
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        message: '查询中',
      });

      let date = new Date(this.startTime);
      let list = [];
      let memberSX = Lunar.fromDate(new Date(this.birthDayValue)).getYearShengXiao();
      // console.log('他的生肖：：：',memberSX);

      for (let i=0, j= Number(this.diffTimeNum); i<j; i++){
        let gettime = date.getTime() + i*24 * 60 * 60 * 1000;
        let d = Lunar.fromDate(new Date(gettime));
        let solar = Solar.fromDate(new Date(gettime));
        let Yi = d.getDayYi();
        if(Yi.includes(this.keyword)) {
          let _Lunar = solar.getLunar().toFullString().split(" ");// 将阴历当天的详情转字符并分割数组
          let _theDaySX = _Lunar[_Lunar.length - 2];//当天冲什么生肖
          let _isXianChong = _theDaySX.includes(memberSX);//判断是否和门主相冲
          let _info = {
            Lunar: _Lunar,
            datetime: solar.getYear() + '/' + solar.getMonth() + '/' + solar.getDay(),
            yearAndMonth: solar.getYear() + '.' + solar.getMonth(),
            day: solar.getDay(),
            diffTime: this.diffTime(date.getTime(),gettime),
            isXianChong: _isXianChong
          };
          list.push(_info);
        }
      }
      this.daylist = list;
      if(list.length == 0) {
        this.$toast.clear();
        this.$dialog.alert({
          message: `该日期范围内暂无 【${this.keyword}】 的吉日，可试试选择其他日期`,
        });
      } else {
        setTimeout(() => {
          this.$toast.clear();
        }, 2000);
      }
      // console.log('ddddddddddddddddd',list)
    },
    toAlmanac(data) {
      this.$router.push(this.fun.getUrl('almanac', {}, {data: data}));
    }
  }
}

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
.bg-2C9C56 {
  background-color: #2C9C56;
}
.bg-D32D30 {
  background-color: #D32D30;
}
.opacity-5 {
  opacity: 0.5;
}
.goodday-list {
  padding: 0.75rem;
  .list {
    background: #FFF9F0;
    border-radius: 8px;
    opacity: 1;
    border: 1px solid #BD7E54;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }
}
.van-nav-bar {
  background: #F9F1E5;
}
.yj-box {
  padding: 0.75rem 0.75rem 0 0.75rem;
  background: #F9F1E5;
  .category {
    font-size: 1.125rem;
    line-height: 1.125rem;
    font-weight: bold;
    text-align: left;
    border-left: 3px solid #bd7e54;
    padding-left: 0.25rem;
    margin-bottom: 0.75rem;
  }
  .yj-item {
    width: 6.75rem;
    line-height: 2.75rem;
    color: #1C1C1C;
    font-size: 17px;
    font-weight: bold;
    background: #FFF9F0;
    border-radius: 0.5rem;
    border: 1px solid #BD7E54;
    margin: 0 0.75rem 0.75rem 0;
  }
  .yj-item:nth-child(3n){
    margin-right: 0;
  }
}
.btn-small {
  min-width: 6rem;
  line-height: 2rem;
  border-radius: 8px;
  color: #fff;
}
.bg-F9F1E5 {
  background: #f9f1e5;
  min-height: 100vh;
}
::v-deep .van-cell {
  background: transparent;
  font-size: 18px;
}
::v-deep .van-field {
  margin: 0px 16px;
  width: auto;
  border: 1px solid #BD7E54;
  background: #FFF9F0;
  border-radius: 8px 8px 8px 8px;
}
</style>